import { Table , Select,Input, Row, Button, Card ,Col,Tree,Pagination} from 'antd';
import ProTable from '@ant-design/pro-table';
const { Option } = Select;
import { RightOutlined,LeftOutlined } from '@ant-design/icons'

import React, { useState} from 'react';
import styles from '../style.less'
import Demo from '../tree'
const conditionEnum = {
  all: '全部',
  one:  '联动条件1',
  two: '联动条件2',
  three: '联动条件3',
};


const Conditions: React.FC = () => {
   type TableListItem = {
    ID: number;
    task: string;
    condition: string;
    result: string;
  };

  type TableListItem1 = {
    ID: number;
    name: string;
  };
  const dataSource : TableListItem[] = [];
  const dataSource1 : TableListItem1[] = [];
  for (let i = 0; i < 2; i += 1) {
    // dataSource.push( {
    //   ID: i ,
    //   task:'去年1月',
    //   condition: '去年1月',
    //   result: '去年1月',
    // })
    // dataSource1.push( {
    //   ID: i ,
    //   name:'去年1月',
    
    // })

  }

  const columns1 = [
    {
      title: 'ID',
      dataIndex: 'ID',
      valueType: 'index',
    },
    {
      title: '联动条件名',
      dataIndex: 'name',
      valueType: 'string',
    },
   {
      title: '操作',
      key: 'ID',
     
      valueType: 'option',
      render: (_, row, index, action) => [
        <a
          key="a"
          onClick={() => {
            action?.startEditable(row.ID);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];
  const columns = [
  
    {
      title: '联动条件',
      dataIndex: ' task',
      valueType: 'string',
    },
    {
      title: '变量名',
      dataIndex: 'condition',
      valueType: 'string',
   
    },  {
      title: '条件最小值',
      dataIndex: 'condition',
      valueType: 'number',
    
    
    },{
      title: '条件最大值',
      dataIndex: 'condition',
      valueType: 'number',
    },
    {
      title: '逻辑关系',
      dataIndex: 'result',
      valueType: 'select',
    
      initialValue: ['all'],
      conditionEnum,
    } ,{
      title: '操作',
      key: 'ID',
     
      valueType: 'option',
      render: (_, row, index, action) => [
        <a
          key="a"
          onClick={() => {
            action?.startEditable(row.ID);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];


  const treeData = [
    {
      title: '全选',
      key: '0-0',
      children: [
        {
          title: '联动条件1',
          key: '0-0-0',
        
        },
        {
          title: '联动条件2',
          key: '0-0-1',
        
        },
      ],
    },
  ];
  const onSelect = (selectedKeys: React.Key[], info: any) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck = (checkedKeys: React.Key[], info: any) => {
    console.log('onCheck', checkedKeys, info);
  };
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
  function itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a> <LeftOutlined /></a>;
    }
    if (type === 'next') {
      return <a><RightOutlined /></a>;
    }
    return originalElement;
  }
    return (
      <div className={styles.linkage}>
        <Card>   
          <Row className={styles.sinTitle}><span className={styles.signLine}></span><span> 联动条件编辑</span></Row>
          <Row  className={styles.flexAlignCenter} style={{    margin: '12px 0 20px'}}> 
            <span style={{    marginRight: '20px'}}>
              联动条件名 
            </span>
            <span  className={styles.inputBg} >
              <Input placeholder="请输入联动任务"/>
            </span>
            <Button type="primary" style={{margin:'0 15px 0 30px'}} >增加</Button>
            <Button type="primary"   >修改</Button>
          </Row>
        </Card> 
        <Row  style={{marginTop:'16px'}}>
          <Col span={6} style={{marginRight:'16px'}}>
            <Card  style={{height:'100%'}}> 
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>联动条件</span></Row>
              <ProTable<TableListItem1>
                  dataSource={dataSource1}
              columns={columns1}
              toolBarRender={false}
              search={false}
              pagination={false}

              rowKey="ID" />
            </Card>
          </Col>
          <Col className={styles.flex}>
           
            <Card className={styles.flex1}>   
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span style={{    marginRight: '20px'}}>联动条件名</span>  <span  className={styles.inputBg} >
                  <Input placeholder="请输入联动任务"/>
                </span></Row>
              <Row  className={styles.flexAlignCenter} style={{    margin: '12px 0 20px'}}> 
                <span  className={styles.inputBg} >
                  <Input placeholder="请输入变更名"/>
                </span>
                <span style={{    marginRight: '8px'}}>
                  最小值 
                </span>
                <span  className={styles.inputBg} >
                  <Input style={{width:80}} />
                </span>
                <span style={{    marginRight: '8px'}}>
                  最大值 
                </span>
                <span  className={styles.inputBg} >
                  <Input  style={{width:80}}/>
                </span>
                <span style={{    marginRight: '8px'}}>
                  逻辑关系
                </span>
                <div  className={styles.inputBg} >
                  <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} placeholder="请选择联动条件"  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                    <Option value=""  >全部联动条件</Option>
                    <Option value="week">联动条件1</Option>
                    <Option value="month">联动条件2</Option>
                    <Option value="quarter">联动条件3</Option>
                  </Select>
                </div>
                <Button type="primary"  className={styles.searchBtnBg}  style={{marginRight:'15px'}} >新增</Button>
                <Button type="primary" className={styles.searchBtnBg}   style={{marginRight:'15px'}} >修改</Button>
                <Button type="primary"  className={styles.searchBtnBg}   style={{marginRight:'15px'}} >导入</Button>
                <Button type="primary"   className={styles.searchBtnBg}  style={{marginRight:'15px'}} >导出</Button>
                <Button type="primary"   className={styles.searchBtnBg}  >全部删除</Button>
          
            </Row>
            <Row>
              <Col span={5}>
              <Tree
                  checkable
                  defaultExpandedKeys={ ['0-0']}
                  onSelect={onSelect}
                  onCheck={onCheck}
      
                  treeData={treeData}
                />
                 <Pagination
              total={1}
              showTotal={total => `共 ${total} 项`}
              itemRender={itemRender}  
              size="small"
              style={{margin:16}}
              showSizeChanger={false}
            />
              </Col>
              <Col className={styles.flex}>
                <ProTable<TableListItem>
                   className={styles.flex1}
                    dataSource={dataSource}
                columns={columns}
                toolBarRender={false}
                search={false}
                rowSelection={{}}
                pagination={{  // 分页
                  position:['bottomCenter']  ,
              
                  showTotal:total => `共 ${total} 项`
                  //simple:true
                }}
                rowKey="ID" />
                </Col>
              </Row>
            </Card>
            </Col> 
       </Row>
      
  </div>
    );
};

export default Conditions;